export const addRichTextEditorComponent = (editor) => {
    const { Components } = editor;

    // 富文本编辑器组件
    Components.addType('richTextEditor', {
        model: {
            defaults: {
                tagName: 'div',
                attributes: { class: 'rich-text-editor-container','data-gjs-type':"richTextEditor" },
                draggable: true, // 设置组件可拖动
                components: [],
                script() {
                    // 创建一个唯一的 ID
                    const editorId = "editor-"+Date.now();
                    this.setAttribute('id', editorId);

                    // 在 iframe 中加载富文本编辑器
                    const iframe = document.createElement('iframe');
                    iframe.style.width = '100%';
                    iframe.style.height = '300px'; 
                    iframe.style.border = "1px";
                    
                    iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts');
                    iframe.onload = () => {
                        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                        const script = iframeDoc.createElement('script');
                        script.src = 'https://unpkg.com/wangeditor@latest/dist/wangEditor.min.js';
                        script.onload = () => {
                            // 初始化wangEditor
                            const E = iframe.contentWindow.wangEditor;
                            const editorContainer = iframeDoc.createElement('div');
                            editorContainer.id = editorId;
                            editorContainer.style.paddingTop=30;
                            iframeDoc.body.appendChild(editorContainer);
                            const editor = new E(`#${editorId}`);
        
                            editor.config.height = 200; // 设置编辑器高度
                           
                            editor.create(); // 创建编辑器
                        };
                        iframeDoc.head.appendChild(script);
                    };
                    this.appendChild(iframe);
                },
                styles: `
                    .rich-text-editor-container {
                        padding: 15px;
                        padding-bottom: 30px;
                        background-color: #fff;
                        border-radius: 5px;
                    }
                `,
            }
        },
        view: {
            // 可能需要根据需要调整视图渲染逻辑
        }
    });

    // 注册富文本编辑器组件到组件面板中
    editor.BlockManager.add('rich-text-editor-block', {
        label: '富文本编辑器',
        category: '组件类',
        content: {
            type: 'richTextEditor',
        },
        draggable: true, // 设置组件在编辑器中可拖动
        media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg>`
    });
};
